/**
 * 多类型选择控制组件
 */
import React from "react";
import { omit } from "lodash";
import { defaultComponentMapping } from "../../constants/map";
import "./index.less";

interface IVTypeProps {
  types: object;
  defaultType?: string;
  value?: any;
  onChange?: (data: any) => any;
}
interface IVTypeState {
  activeType: string;
}
class VType extends React.Component<IVTypeProps, IVTypeState> {
  constructor(props: IVTypeProps) {
    super(props);
    this.state = {
      activeType: props.defaultType
    }
  }
  render() {
    const { types, value, onChange } = this.props;
    const { activeType } = this.state;
    const activeNodeConfig = types[activeType];
    const Node = defaultComponentMapping[activeNodeConfig.node];
    return <div className="v-type-wrapper">
      <ul className="type-list">
        {Object.keys(types).map(key => <li
          className={`type-item ${activeType === key ? "active-type-item" : ""}`}
          onClick={() => this.setState({ activeType: key })}
          key={key}
        > {key} </li>)}
      </ul>
      <div className="control-main">
        <Node {...omit(activeNodeConfig, ["node"])} value={typeof value === activeType ? value : undefined} onChange={onChange} />
      </div>
    </div>
  }
}

export default VType;